<template>
    <el-scrollbar style="height: 100%">
        <Draggable class="tree_item" v-model="treeData"  virtualization style="height: 100%; padding-bottom: 50px">
            <template #default="{ node, stat }" >
                <div  class="docs-group">
                    <div v-if="stat.children.length" @click="stat.open = !stat.open" class="node_item">

                        <Plus v-if="!stat.open" class="item_open_close"/>
                        <Minus v-if="stat.open" class="item_open_close"/>
                        <img src="public/img/files/folder.png" class="item_icon"/>
                        {{ node.text }}
                    </div>
                    <div v-else style="" class="node_item">
                        <img src="public/img/files/document.png" class="item_icon"/>
                        {{ node.text }}
                    </div>
                </div>

            </template>
        </Draggable>
    </el-scrollbar>
</template>
<script>
import { BaseTree, Draggable, pro } from '@he-tree/vue'
import '@he-tree/vue/style/default.css'

export default {
    components: { Draggable },
    data() {
        return {
            treeData: [
                {
                    text: 'Projects',
                    children: [
                        {
                            text: 'Frontend',
                            children: [
                                {
                                    text: 'Vue',
                                    children: [
                                        {
                                            text: 'Nuxt',
                                        },
                                    ],
                                },
                                {
                                    text: 'React',
                                    children: [
                                        {
                                            text: 'Next',
                                        },
                                    ],
                                },
                                {
                                    text: 'React',
                                    children: [
                                        {
                                            text: 'Next',
                                        },
                                    ],
                                },
                                {
                                    text: 'Angular',
                                },
                            ],
                        },
                        {
                            text: 'Backend',
                        },
                    ],
                },
                { text: 'Photos' },
                { text: 'Videos' },
            ],
        }
    },
}
</script>
<style>

.parent{

}

.tree_item{
    font-size: 12px;
    padding-left: 12px;
    padding-right: 12px;
}

.tree_item .node_item{
    line-height: 26px;
}

.tree_item .tree-node-inner
{
    line-height: 36px;
}

.tree_item .item_icon{
    width: 1.5em;
    height: 1.5em;
    margin-left: 12px
}

.tree_item .item_open_close{
    width: 0.8em;
    height: 0.8em;
    margin-left: 12px
}

.docs-group {
    border-left: 1px dotted #ddd;
}

</style>